<template>
    <div class="app-container">
        <el-card class="main-card">
            <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="90px" size="small">
                <el-form-item label="组态名称" prop="pageName">
                    <el-input v-model="queryParams.pageName" clearable placeholder="请输入组态名称" @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item>
                    <el-button v-hasPermi="['iot:zutai:list']" icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
                    <el-button v-hasPermi="['iot:zutai:assignment']" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="main-card">
            <div class="card-toolbar mb20 flex-between">
                <div>
                    <el-button v-hasPermi="['iot:zutai:add']" icon="el-icon-plus" plain size="mini" style="margin-right: 20px" type="primary" @click="handleAdd">新增</el-button>
                    <el-dropdown @command="(command) => handleCommand1(command)">
                        <el-button v-hasPermi="['iot:zutai:assignment']" plain size="mini" type="primary" style="margin-right: 20px">
                            分配组态
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-hasPermi="['iot:zutai:assignment']" command="handleSelectAllot">选择分配</el-dropdown-item>
                            <!--                    <el-dropdown-item command="handleImportAllot">导入分配</el-dropdown-item>-->
                        </el-dropdown-menu>
                    </el-dropdown>
                    <template v-if="showType == 'list'">
                        <el-button v-hasPermi="['iot:zutai:edit']" :disabled="single" icon="el-icon-edit" plain size="mini" type="primary" @click="handleUpdate">修改</el-button>
                        <el-button v-hasPermi="['iot:zutai:delete']" :disabled="multiple" icon="el-icon-delete" plain size="mini" type="danger" @click="handleDelete">删除</el-button>
                    </template>
                </div>
                <el-radio-group class="fr ml10" plain size="mini" v-model="showType">
                    <el-radio-button label="card"><i class="el-icon-menu"></i></el-radio-button>
                    <el-radio-button label="list"><i class="el-icon-s-fold"></i></el-radio-button>
                </el-radio-group>
            </div>
            <el-table class="base-table" :border="false" v-if="showType == 'list'" v-loading="loading" :data="zutaiList" @selection-change="handleSelectionChange">
                <el-table-column align="center" type="selection" width="55" />
                <el-table-column align="center" label="组态名称" prop="pageName" />
                <el-table-column align="center" label="尺寸" prop="pageSize" />
                <el-table-column align="center" label="缩略图" prop="pageImage" width="100">
                    <template slot-scope="scope">
                        <!--          <el-image   :src="scope.row.pageImage"   />-->
                        <img :src="scope.row.pageImage" height="25" width="25" />
                        <!--          <image-preview :src="scope.row.pageImage" :width="50" :height="50"/>-->
                    </template>
                </el-table-column>
                <el-table-column :formatter="formatterManPage" align="center" label="页面类型" prop="isMainPage" />
                <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
                    <template slot-scope="scope">
                        <el-button v-hasPermi="['iot:zutai:update']" icon="el-icon-edit" type="primary" plain style="padding: 5px; margin: 0" size="small" @click="handleUpdate(scope.row)">修改</el-button>
                        <el-button v-hasPermi="['iot:zutai:preview']" icon="el-icon-view" type="primary" plain style="padding: 5px; margin: 0" size="small" @click="viewZutai(scope.row)">预览</el-button>
                        <el-button v-hasPermi="['iot:zutai:edit']" icon="el-icon-edit" type="primary" plain style="padding: 5px; margin: 0" size="small" @click="editZutai(scope.row)">编辑组态</el-button>
                        <el-button v-hasPermi="['iot:zutai:delete']" icon="el-icon-delete" type="danger" plain style="padding: 5px; margin: 0" size="small" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row v-else :gutter="20" v-loading="loading">
                <el-col v-for="item in zutaiList" :key="item.id" style="width: 20%; margin-bottom: 30px; text-align: center">
                    <div class="card-box-outer">
                        <el-card style="height: 300px; background-image: linear-gradient(#e9f1fc, #fefefe); box-sizing: border-box; margin-bottom: 20px; border: 0" :body-style="{ padding: '5px' }">
                            <!-- <span class="device-name">{{ item.deviceName }}</span> -->
                            <div class="card-image">
                                <el-image :src="item.pageImage" class="flex-center" />
                                <div style="padding: 5px">
                                    <div class="card-name">{{ item.pageName }}</div>
                                    <!-- <svg-icon icon-class="qrCode" style="width:25px;height:25px;cursor:pointer;float: right;"
                    v-if="item.isShare == 1" @click="showCodeClick(item)" /> -->
                                    <div class="bottom clearfix">
                                        <el-button size="small" class="detail-btn" @click="handleUpdate(item)" v-hasPermi="['iot:zutai:edit']">修改</el-button>
                                        <el-button size="small" class="detail-btn" @click="viewZutai(item)" v-hasPermi="['iot:zutai:preview']">预览</el-button>
                                        <el-button size="small" class="detail-btn" @click="editZutai(item)" v-hasPermi="['iot:zutai:edit']">编辑</el-button>
                                        <el-button size="small" class="delete-btn" @click="handleDelete(item)" v-hasPermi="['iot:zutai:delete']">删除</el-button>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </el-col>
            </el-row>
            <pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total" @pagination="getList" />
        </el-card>
        <!-- 添加或修改云组态对话框 -->
        <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" append-to-body width="500px">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="页面图片" prop="pageImage">
                    <image-upload v-model="form.pageImage" :fileSize="1" :limit="1" />
                </el-form-item>
                <!-- <el-form-item label="是否主界面" prop="isMainPage">
          <el-radio v-model="form.isMainPage" :label="1">主界面</el-radio>
          <el-radio v-model="form.isMainPage" :label="0">子界面</el-radio>
        </el-form-item> -->
                <el-form-item label="页面名称" prop="pageName">
                    <el-input v-model="form.pageName" placeholder="请输入页面名称" />
                </el-form-item>
                <el-form-item label="页面大小" prop="pageSize">
                    <el-select v-model="form.pageSize" placeholder="请选择页面大小" style="width: 380px">
                        <el-option v-for="item in fblOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="选择设备" prop="deviceMac">
          <el-select v-model="form.deviceMac" placeholder="请选择设备" style="width:380px">
            <el-option
              v-for="item in deviceList"
              :key="item.serialNumber"
              :label="item.deviceName"
              :value="item.serialNumber">
            </el-option>
          </el-select>
        </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

        <!--设备分享对话框-->
        <el-dialog :visible.sync="ztUserAddDialog" title="组态分享" width="800px">
            <div style="margin-top: -50px">
                <el-divider></el-divider>
            </div>
            <!--用户查询-->
            <el-form ref="ztQueryForm" :inline="true" :model="ztUserParams" label-width="80px">
                <el-form-item label="手机号码" prop="phonenumber">
                    <el-input
                        v-model="ztUserParams.phonenumber"
                        clearable
                        minlength="10"
                        placeholder="请输入用户手机号码"
                        show-word-limit
                        size="small"
                        style="width: 240px"
                        type="text"
                        @keyup.enter.native="ztUserQuery"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-search" size="mini" type="primary" @click="ztUserQuery">查询用户</el-button>
                </el-form-item>
            </el-form>

            <!--用户信息和权限设置-->
            <div v-loading="ztUserAddLoading" style="background-color: #f8f8f9; line-height: 28px">
                <div v-if="ztUserAddMessage" style="padding: 20px">{{ ztUserAddMessage }}</div>
                <div v-if="ztAddForm.userId" style="padding: 15px">
                    <div style="font-weight: bold; line-height: 28px">用户信息</div>
                    <span style="width: 80px; display: inline-block">用户ID：</span>
                    <span>{{ ztAddForm.userId }}</span>
                    <br />
                    <span style="width: 80px; display: inline-block">手机号码：</span>
                    <span>{{ ztAddForm.phonenumber }}</span>
                    <br />
                    <span style="width: 80px; display: inline-block">用户名称：</span>
                    <span>{{ ztAddForm.userName }}</span>
                    <br />
                    <div style="font-weight: bold; margin: 15px 0 10px">备注信息</div>
                    <el-input v-model="ztAddForm.remark" placeholder="请输入内容" rows="2" type="textarea" />
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button :disabled="!ztAddForm.userId || !ztItem.id" type="primary" @click="submitAddForm">确定</el-button>
                <el-button @click="closeZtSelectUser">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { addBDeviceZt, delBDeviceZt, getBDeviceZt, listBDeviceZhZt, listBDeviceZt, updateBDeviceZt } from '@/views/zutai/api/zutai/zutai';
import { addZtUser, delZtUser, listZtUser, shareZtUser } from '@/views/zutai/api/zutai/ztUser';
import { listAllDeviceShort } from '@/api/iot/device';

import ImageUpload from '../components/ImageUpload';

export default {
    components: {
        ImageUpload,
    },
    data() {
        return {
            zutaiList: [],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 三维配置表格数据
            bDeviceModelList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            showType: 'card',
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 12,
                orderByColumn: 'id',
                isAsc: 'desc',
                nickName: null,
                deptName: null,
                modelName: null,
                modelUrl: null,
                status: null,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                // deviceMac: [
                //   { required: true, message: "设备编号不能为空", trigger: "blur" }
                // ],
                pageName: [{ required: true, message: '页面名称不能为空', trigger: 'blur' }],
                pageSize: [{ required: true, message: '尺寸不能为空', trigger: 'blur' }],
                pageImage: [{ required: true, message: '图片地址不能为空', trigger: 'blur' }],
                isMainPage: [{ required: true, message: '选择页面类型不能为空', trigger: 'blur' }],
            },
            fblOptions: [
                {
                    value: '960x600',
                    label: '小屏幕:960x600',
                },
                {
                    value: '1024x768',
                    label: '小屏幕:1024x768',
                },
                {
                    value: '1280x1024',
                    label: '小屏幕:1280x1024',
                },
                {
                    value: '1366x768',
                    label: 'PC网页:1366x768',
                },
                {
                    value: '1440x900',
                    label: 'PC网页:1440x900',
                },
                {
                    value: '1920x960',
                    label: 'PC网页:1920x960',
                },
                {
                    value: '1920x1080',
                    label: 'PC网页:1920x1080',
                },
                {
                    value: '2048x858',
                    label: '2K屏幕:2048x858',
                },
                {
                    value: '2048x1080',
                    label: '2K屏幕:2048x1080',
                },
                {
                    value: '3840x2160',
                    label: '4K屏幕:3840x2160',
                },
                {
                    value: '3656x2664',
                    label: '2K屏幕:3656x2664',
                },
                {
                    value: '4096x3112',
                    label: '4K屏幕:4096x3112',
                },
                {
                    value: 'custom',
                    label: 'custom',
                },
            ],
            deviceList: [],
            ztUserSelectDialog: false,
            ztUserLoading: false,
            ztUserList: [],
            ztUserParams: {
                phonenumber: '',
            },
            ztUserAddDialog: false,
            ztUserAddLoading: false,
            ztUserAddMessage: '',
            ztItem: {},
            // 表单参数
            ztAddForm: {},
        };
    },
    created() {
        this.getList();
        this.getDeviceALl();
    },
    methods: {
        getDeviceALl() {
            listAllDeviceShort().then((res) => {
                this.deviceList = res.rows;
            });
        },
        /** 查询三维配置列表 */
        getList() {
            this.loading = true;
            let baseApi = process.env.VUE_APP_BASE_API;
            this.queryParams.pageSize = 10;
            console.log(this.queryParams);
            listBDeviceZhZt(this.queryParams).then((response) => {
                response.rows.forEach((item) => {
                    item.pageImage = baseApi + item.pageImage;
                });
                this.zutaiList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                userName: null,
                nickName: null,
                deptName: null,
                modelName: null,
                modelUrl: null,
                status: 0,
            };
            this.resetForm('form');
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm');
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = '添加组态';
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids;
            getBDeviceZt(id).then((response) => {
                this.form = response.data;
                this.open = true;
                this.title = '修改三维配置';
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.form.id != null) {
                        updateBDeviceZt(this.form).then((response) => {
                            this.$modal.msgSuccess('修改成功');
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addBDeviceZt(this.form).then((response) => {
                            this.$modal.msgSuccess('新增成功');
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal
                .confirm('是否确认删除组态编号为"' + ids + '"的数据项？')
                .then(function () {
                    return delBDeviceZt(ids);
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess('删除成功');
                })
                .catch(() => {});
        },
        /** 编辑组态 */
        editZutai(row) {
            // console.log('row', row);
            let guid = row.guid;
            let deviceMac = row.deviceMac;
            let deviceName = row.pageName;
            const routeUrl = this.$router.resolve({
                path: '/editor',
                query: {
                    guid: guid,
                    deviceImei: deviceMac,
                    deviceName,
                },
            });
            // console.log(routeUrl);
            window.open('/' + routeUrl.href, '_blank');
        },
        /** 查看组态 */
        viewZutai(row) {
            console.log(row);
            let guid = row.guid;
            let deviceMac = row.deviceMac;
            let deviceName = row.deviceName;
            const routeUrl = this.$router.resolve({
                path: '/fullscreen',
                query: {
                    guid: guid,
                    deviceImei: deviceMac,
                    deviceName: deviceName,
                },
            });
            // console.log("当前打开窗口");
            window.open('/' + routeUrl.href, '_blank');
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                'zutai/bDeviceModel/export',
                {
                    ...this.queryParams,
                },
                `bDeviceModel_${new Date().getTime()}.xlsx`
            );
        },
        formatterManPage(rows, column) {
            return rows.isMainPage == 1 ? '主页面' : '子页面';
        },
        // 查询组态用户
        ztUserQuery() {
            this.getShareZtUser();
        },
        getShareZtUser() {
            this.ztUserAddLoading = true;
            if (!this.ztItem.id) {
                this.$modal.alert('查询不到组态信息，请刷新后重试');
                return;
            }
            this.ztUserParams.ztId = this.ztItem.id;
            shareZtUser(this.ztUserParams).then((response) => {
                if (response.data) {
                    this.ztAddForm = response.data;
                } else {
                    this.message = '查询不到用户信息，或者该用户已经是设备用户';
                }
                this.ztUserAddLoading = false;
            });
        },
        // 关闭选择用户
        closeZtSelectUser() {
            this.ztUserAddDialog = false;
            this.resetZtUserQuery();
        },
        submitAddForm() {
            // 添加设备用户
            this.ztAddForm.ztId = this.ztItem.id;
            this.ztAddForm.ztName = this.ztItem.pageName;
            addZtUser(this.ztAddForm).then((response) => {
                this.$modal.msgSuccess('新增成功');
                this.ztUserAddDialog = false;
                this.resetZtUserQuery();
            });
        },
        // 重置查询
        resetZtUserQuery() {
            this.resetForm('ztQueryForm');
        },
        // 分配组态更多操作触发
        handleCommand1(command) {
            switch (command) {
                case 'handleSelectAllot':
                    this.handleSelectAllot();
                    break;
                case 'handleImportAllot':
                    alert('开发中!!!');
                    break;
                default:
                    break;
            }
        },
        //跳转选择分配设备页面
        handleSelectAllot() {
            this.$router.push({
                path: '/zutai/deviceAlzutai',
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.time {
    font-size: 13px;
    color: #999;
    margin-right: 5px;
}

.bottom {
    --font-grey: #606266;
    --success-color: #67c23b;
    --primary-color: #0147eb;
    margin-top: 13px;
    line-height: 12px;
    text-align: right;
}

.ztImage {
    width: 100%;
    display: block;
    height: 200px;
}

.ztImage:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}

.clearfix:after {
    clear: both;
}

.device-name {
    background-color: #5479f7;
    display: inline-block;
    color: #fff;
    text-align: center;
    height: 25px;
    line-height: 15px;
    font-size: 12px;
    padding: 4px 6px;
    position: fixed;
    margin: -5px;
    z-index: 2;
}
</style>
